<template>
	<view class="page">
		<view class="Personal_Information">
			<image style="width: 120rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E6%99%BA%E8%83%BD%E5%AE%A2%E6%9C%8D/u6407.png" mode="widthFix"></image>
			<view class="name_other" v-if="userInfo.name">
				<view class="name">
					{{userInfo.nickme}}
				</view>
				<view class="more" @click="family">
					家庭管理({{familys}}人管理中) >
				</view>
			</view>
			<view class="login" v-else>
				登录/注册
			</view>
		</view>
		<!-- 就诊卡信息 -->
		<view class="PatientIDCard" v-if="userInfo.name">
			<view class="people">
				<view class="name">
					{{userInfo.name}}<text style="font-size: 24rpx;margin-left: 10rpx;">(本人)</text>
				</view>
				<view class="register_code">
					登记号：{{userInfo.Medical_number}}
				</view>
			</view>
			<view class="Vrcode">
				<image  style="width: 70rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E6%88%91%E7%9A%84/u7436.svg" mode="widthFix"></image>
			</view>
		</view>
		<!-- 服务设置 -->
		<view class="service_set">
			<view class="littleTitle">
				诊疗记录
			</view>
			<view class="servicelists">
				<view class="service" @click="jump('/pages/Registered_order/Registered_order')">
					<view class="Image">
						
					</view>
					<view class="text">
						挂号订单
					</view>
				</view>
				<view class="service" @click="jump('/pages/Medical_Order/Medical_Order')">
					<view class="Image">
						
					</view>
					<view class="text">
						医嘱订单
					</view>
				</view>
				<view class="service" @click="jump('/pages/Medical_records/Medical_records')">
					<view class="Image">
						
					</view>
					<view class="text">
						就诊记录
					</view>
				</view>
				<view class="service" @click="jump('/pages/account_management/account_management')">
					<view class="Image">
						
					</view>
					<view class="text">
						设置
					</view>
				</view>
			</view>
		</view>
		<!-- <Tabbar></Tabbar> -->
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import api from '../../src/utils/api.js'
	import { ref } from 'vue'
	const userInfo = ref({
		nickme:'',
		name:'',
		Medical_number:'',
	})
	const familys = ref(0)
	onLoad(()=>{
		console.log(uni.getStorageSync('userid'))
		api('/appselectid',{
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			userInfo.value = res.data[0]
		}).catch(err=>{
			console.log(err)
		})
		api('/appfamily',{
			userid:uni.getStorageSync('userid')
		}).then(res=>{
			console.log(res.length)
			familys.value = res.length+1
		}).catch(err=>{
			console.log(err)
		})
	})
	// 跳转家庭管理
	const family = () => {
		if(userInfo.value.name){
			uni.navigateTo({
				url:'/pages/family_management/family_management?id=1'
			})
		}else{
			console.log('请先登录')
			uni.redirectTo({
				url:'/pages/register/register'
			})
		}
		
	}
	const jump = (url) => {
		if(userInfo.value.name){
			uni.navigateTo({
				url:url
			})
		}else{
			console.log('请先登录')
			uni.redirectTo({
				url:'/pages/register/register'
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	 .page{
		 padding: 32rpx 40rpx;
		 background-color: rgba(255, 255, 255, 0.498039215686275);
		 min-height: 100vh;
		 box-sizing: border-box;
		 border-top: 2rpx solid #f2f2f2;
		 .Personal_Information{
			 display: flex;
			 align-items: center;
			 .login{
				 font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				 font-size: 40rpx;
				 color: #333;
				 font-weight: 700;
				 margin-left: 40rpx;
			 }
			 .name_other{
				 font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				 font-size: 28rpx;
				 color: #333;
				 margin-left: 40rpx;
				 .name{
					 font-size: 32rpx;
					 font-weight: 700;
				 }
				 .more{
					 font-size: 26rpx;
					 color: #1677FF;
					 margin-top: 18rpx;
				 }
			 }
		 }
		 .PatientIDCard{
			 width: 100%;
			 height: 174rpx;
			 margin-top: 46rpx;
			 padding: 34rpx 40rpx;
			 box-sizing: border-box;
			 background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E6%88%91%E7%9A%84/u7431.svg');
			 background-size: cover;
			 display: flex;
			 justify-content: space-between;
			 .people{
				 font-family: 'Microsoft YaHei UI', sans-serif;
				 color: #fff;
				 font-size: 24rpx;
				 .name{
					 font-size: 32rpx;
				 }
				 .register_code{
					 margin-top: 22rpx;
				 }
			 }
			 .Vrcode{
				 width: 90rpx;
				 height: 90rpx;
				 border-radius: 16rpx;
				 background-color: #fff;
				 display: flex;
				 align-items: center;
				 justify-content: center;
			 }
		 }
		 // 服务设置
		 .service_set{
			 margin-top: 48rpx;
			 .littleTitle{
				 font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				 font-size: 32rpx;
				 font-weight: 700;
				 color: #333;
				 margin-bottom: 34rpx;
			 }
			 .servicelists{
				 width: 100%;
				 display: flex;
				 align-items: center;
				 justify-content: space-between;
				 .service{
					 width: 25%;
					 display: flex;
					 flex-direction: column;
					 align-items: center;
					 justify-content: center;
					 .Image{
						 width: 64rpx;
						 height: 64rpx;
						 background-color: rgba(186, 224, 255, 1);
						 border-radius: 12rpx;
					 }
					 .text{
						 font-family: 'Microsoft YaHei UI', sans-serif;
						 font-size: 28rpx;
						 margin-top: 14rpx;
					 }
				 }
			 }
		 }
	 }      
</style>
